<template>
  <div>
    <div class="header-container">
      <el-button type="primary" icon="el-icon-plus" @click="add">新增轮灌组</el-button>
    </div>
    <el-tabs v-model="activeName" type="card" style="margin:12px;">
      <el-tab-pane label="系统轮灌组" name="first">
        <list :cells="cells" @getOne="getOne" @deleteOne="deleteOne" />
      </el-tab-pane>
      <el-tab-pane label="临时轮灌组" name="second">
        <list :cells="cells" @getOne="getOne" @deleteOne="deleteOne" />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="706px"
      append-to-body
      @close="dialogClose"
    >
      <main-form :form-data="formData" :extra-data="extraData" :serialno="serialno" @submit="submit" />
    </el-dialog>
  </div>
</template>

<script>
import { getAll, addOne, getOne, updateOne, deleteOne, getExtra } from '@/api/cell'
import { dclassCodeMap } from '@/utils/constant'
import MainForm from './components/main-form'
import List from './components/list'
import { mapGetters } from 'vuex'
export default {
  components: {
    MainForm,
    List
  },
  data() {
    return {
      activeName: 'first',
      cells: [],
      serialno: this.$store.getters.devices.filter(val => {
        return +val.product_type === dclassCodeMap.dg
      })[0]['serialno'],
      dialogVisible: false,
      formData: {},
      title: '新增记录',
      extraData: [],
      params: { ctl_type: 1 }
    }
  },
  computed: {
    ...mapGetters(['project'])
  },
  watch: {
    activeName: {
      handler(newVal) {
        if (newVal === 'first') {
          this.params = { ctl_type: 1 }
        } else {
          this.params = { ctl_type: 2 }
        }
        this.getAll()
      },
      immediate: true
    }
  },
  methods: {
    async getAll() {
      const { data } = await getAll(this.serialno, this.params)
      this.cells = data
    },
    async add() {
      this.title = '添加记录'
      const extraData = await getExtra(this.serialno, 0, this.params)
      this.extraData = extraData.data
      this.dialogVisible = true
    },
    submit(formData) {
      formData.ctl_type = this.params.ctl_type
      formData.valves = this.extraData.filter((val) => {
        return formData.ports.includes(val.idx)
      })
      if (formData.serialno) {
        updateOne(this.serialno, formData.idx, formData).then(res => {
          this.$message({ message: res.msg, type: 'success', showClose: true })
          this.initial()
        })
      } else {
        addOne(this.serialno, formData).then(res => {
          if (res.errorCode === 0) {
            this.$message({ message: res.msg, type: 'success', showClose: true })
            this.initial()
          }
        })
      }
    },
    async getOne(item) {
      const { data } = await getOne(item.serialno, item.idx)
      const extraData = await getExtra(item.serialno, item.idx, this.params)
      this.title = '修改记录'
      this.formData = data
      this.extraData = extraData.data
      this.dialogVisible = true
    },
    dialogClose() {
      this.formData = {}
    },
    initial() {
      this.dialogVisible = false
      this.getAll()
      const params = { force: 1 }
      if (this.project) {
        params.project_id = this.project.id
      }
      this.$store.dispatch('device/getAll', params).then(res => {
        this.$message({ message: '缓存清除成功', type: 'success', showClose: true })
      })
    },
    async deleteOne(item) {
      this.$confirm('确定要删除此记录吗？', '操作确认', { type: 'warning' }).then(res => {
        deleteOne(item.serialno, item.idx).then(res => {
          this.$message({ message: res.msg, type: 'success', showClose: true })
          this.initial()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.header-container{
  margin:1% 1% 0.5% 1%;
  background:#f0f0f0;
  padding:12px;
  border-radius:4px;
}
</style>
